@extends('layouts.app')
@section('style')
    @parent
@endsection
@section('content')
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div id="success-info"></div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <!-- Button trigger modal -->
                    @can('add permission')
                        <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#addPermission">
                            添加权限
                        </button>
                        @else
                        权限列表
                    @endcan
                </div>
                <div class="panel-body">
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>权限</th>
                            <th>看守器</th>
                            <th>描述</th>
                            <th>创建时间</th>
                            <th>更新时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody class="table-body">
                        @if(!empty($permission))
                            @forelse($permission as $val)
                                <tr data-id="{{$val->id}}">
                                    <td id="id">{{$val->id}}</td>
                                    <td id="name">{{$val->name}}</td>
                                    <td>{{$val->guard_name}}</td>
                                    <td id="description">{{$val->description}}</td>
                                    <td>{{$val->created_at}}</td>
                                    <td>{{$val->updated_at}}</td>
                                    <td>
                                        @can('edit permission')<button type="button" class="btn btn-info edit" data-toggle="modal" data-target="#editPermission">修改</button>@endcan
                                        @can('delete permission')<button type="button" class="btn btn-danger delete" onclick="destroy({{$val->id}})">删除</button>@endcan
                                    </td>
                                </tr>
                            @empty
                                null
                            @endforelse
                        @endif
                        </tbody>
                    </table>
                </div>
            </div>
            {{$permission->links()}}
        </div>
    </div>
    <!--addPermission Modal -->
    <div class="modal fade" id="addPermission" tabindex="-1" role="dialog" aria-labelledby="addPermission">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="addPermission">添加权限</h4>
                </div>
                <div class="modal-body">
                    <div class="volidate"></div>
                    <div id="create-form">
                        <div class="form-group">
                            <label for="name">权限名</label>
                            <input type="text" class="form-control" id="name" placeholder="name" name="name">
                        </div>
                        <div class="form-group">
                            <label for="description">描述</label>
                            <input type="text" class="form-control" id="description" placeholder="description" name="description">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="save">Save</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <!--editPermission Modal -->
    <div class="modal fade" id="editPermission" tabindex="-1" role="dialog" aria-labelledby="editPermission-title">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="editPermission-title">修改权限</h4>
                </div>
                <div class="modal-body">
                    <div class="volidate"></div>
                    <div id="edit-form">
                        <input type="hidden" class="form-control" id="id" placeholder="id" name="id">
                        <div class="form-group">
                            <label for="name">权限名</label>
                            <input type="text" class="form-control" id="name" placeholder="name" name="name">
                        </div>
                        <div class="form-group">
                            <label for="description">描述</label>
                            <input type="text" class="form-control" id="description" placeholder="description" name="description">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="edit">Edit</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    @parent
    <script>
        $('#save').click(function () {
            var name = $("#addPermission input[ name='name' ] ").val().trim();
            var description = $("#addPermission input[ name='description' ] ").val().trim();
            $.ajax({
                type:'post',
                url:'permission',
                cache: false,
                data:{name:name,description:description},
                dataType:'json',
                success:function(data){
                    $('.table-body').append('<tr data-id="'+data.permission.id+'" class="success">' +
                        '<td id="id">'+data.permission.id+'</td>' +
                        '<td id="name">'+data.permission.name+'</td>' +
                        '<td>'+data.permission.guard_name+'</td>' +
                        '<td id="description">'+data.permission.description+'</td>' +
                        '<td>'+data.permission.created_at+'</td>' +
                        '<td>'+data.permission.updated_at+'</td>' +
                        '<td>' +
                        '<button type="button" class="btn btn-info edit" data-toggle="modal" data-target="#editPermission">修改</button>  ' +
                        '<button type="button" class="btn btn-danger delete" onclick="destroy('+data.permission.id+')">删除</button>' +
                        '</td>' +
                        '</tr>');
                    mesBox($('#success-info'),'success','添加成功');
                    $('#addPermission').modal('hide');
                },
                error:function(data){
                    var json=JSON.parse(data.responseText);
                    var msg ='';
                    $.each(json.errors, function(idx, obj) {
                        msg+=obj[0]+'</br>';
                    });
                    mesBox($('#addPermission .volidate'),'danger',msg);
                    console.log(json.errors)
                }
            })
        });
        $('#edit').click(function () {
            var id = $("#editPermission input[ name='id' ] ").val();
            var name = $("#editPermission input[ name='name' ] ").val();
            var description = $("#editPermission input[ name='description' ] ").val();
            $.ajax({
                type:'put',
                url:'permission/'+id,
                data:{name:name,description:description},
                cache: false,
                success:function(data){
                    mesBox($('#success-info'),'success','修改成功');
                    $('#editPermission').modal('hide');
                    $('tr[data-id='+id+']').children('td#name').text(name);
                    $('tr[data-id='+id+']').children('td#description').text(description);
                    console.log(data)
                },
                error:function(data){
                    var json=JSON.parse(data.responseText);
                    var msg ='';
                    $.each(json.errors, function(idx, obj) {
                        msg+=obj[0]+'</br>';
                    });
                    mesBox($('#editPermission .volidate'),'danger',msg);
                    console.log(json.errors)
                }
            })
        });
        function destroy(id) {
            $.ajax({
                type:'delete',
                url:'permission/'+id,
                cache: false,
                success:function(data){
                    mesBox($('#success-info'),'info','删除成功');
                    $('tr[data-id='+id+']').remove();
                    console.log(data)
                },
                error:function(data){
                    return false
                }
            })
        }
        function mesBox($el,info,mes) {
            $el.html('<div class="alert alert-'+info+' alert-dismissable" role="alert"><button type="button" class="close" data-dismiss="alert"' +'aria-hidden="true">' +
                '                &times;' +
                '            </button>'+mes+'</div>')
        }
        $(function () {
            $('#addPermission').on('hidden.bs.modal', function () {
                $("#addPermission input[ name='name' ] ").val('');
                $("#addPermission input[ name='description' ] ").val('');
            });
            $(document).on('click','button.edit',function () {
                let id = $(this).parent().siblings('td#id').text();
                $.ajax({
                    type:'get',
                    url:'permission/create',
                    data:{id:id},
                    cache: false,
                    success:function(data){
                        $("#editPermission input[ name='id' ] ").val(data.permission.id);
                        $("#editPermission input[ name='name' ] ").val(data.permission.name);
                        $("#editPermission input[ name='description' ] ").val(data.permission.description);
                    },
                    error:function(data){
                        return false
                    }
                });
            });
        });
    </script>
@endsection
